<template>
  <view class="filter-container">
    <CustomHeader ref="customHeader" backgroundColor="#fcf6f3"></CustomHeader>
    
    <!-- 页头部分 -->
    <view class="header">
      <view class="header-left" @tap="goBack">
        <image src="/static/icons/left_arrow.png" class="back-icon"></image>
      </view>
      <text class="header-title">筛选</text>
      <view class="header-right"></view>
    </view>

    <scroll-view class="content" scroll-y>
      <!-- VIP专享区域 -->
      <view class="vip-section">
        <view class="vip-header">
          <image src="/static/icons/company/VIP.png" class="vip-icon"></image>
          <text class="vip-text">智聘专享高级筛选特权</text>
        </view>

        <!-- 年龄选择 -->
        <view class="filter-group">
          <text class="filter-title">年龄</text>
          <view class="age-section">
            <view class="age-slider-container">
              <llt-slider-range
                v-model="filterData.ageRange"
                :min="minAge"
                :max="maxAge"
                :step="1"
                backgroundColor="#f2dacb"
                
                activeColor="#8b4513"
                blockColor="#8b4513"
                :blockSize="24"
                :format="formatAge"
                @change="onAgeRangeChange"
              />
            </view>
          </view>
        </view>

        <!-- 性别选择 -->
        <view class="filter-group">
          <text class="filter-title">性别</text>
          <view class="tag-wrapper">
            <view 
              :class="['tag-box', { 'tag-box-selected': filterData.gender === '' }]" 
              @click="selectGender('')"
            >
              <text class="tag-text">不限</text>
            </view>
            <view 
              :class="['tag-box', { 'tag-box-selected': filterData.gender === '男' }]" 
              @click="selectGender('男')"
            >
              <text class="tag-text">男</text>
            </view>
            <view 
              :class="['tag-box', { 'tag-box-selected': filterData.gender === '女' }]" 
              @click="selectGender('女')"
            >
              <text class="tag-text">女</text>
            </view>
          </view>
        </view>

        <!-- 活跃度选择 -->
        <view class="filter-group">
          <text class="filter-title">活跃度</text>
          <view class="tag-wrapper">
            <view 
              :class="['tag-box', { 'tag-box-selected': filterData.activeTime === '' }]" 
              @click="selectActiveTime('')"
            >
              <text class="tag-text">不限</text>
            </view>
            <view 
              :class="['tag-box', { 'tag-box-selected': filterData.activeTime === 'just' }]" 
              @click="selectActiveTime('just')"
            >
              <text class="tag-text">刚刚活跃</text>
            </view>
            <view 
              :class="['tag-box', { 'tag-box-selected': filterData.activeTime === 'today' }]" 
              @click="selectActiveTime('today')"
            >
              <text class="tag-text">今日</text>
            </view>
            <view 
              :class="['tag-box', { 'tag-box-selected': filterData.activeTime === 'threeDays' }]" 
              @click="selectActiveTime('threeDays')"
            >
              <text class="tag-text">三天内</text>
            </view>
            <view 
              :class="['tag-box', { 'tag-box-selected': filterData.activeTime === 'thisWeek' }]" 
              @click="selectActiveTime('thisWeek')"
            >
              <text class="tag-text">本周</text>
            </view>
            <view 
              :class="['tag-box', { 'tag-box-selected': filterData.activeTime === 'thisMonth' }]" 
              @click="selectActiveTime('thisMonth')"
            >
              <text class="tag-text">本月</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 公共筛选区域 -->
      <view class="common-section">
        <!-- 工作经验 -->
        <view class="filter-group">
          <text class="common-filter-title">工作经验</text>
          <view class="tag-wrapper">
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.workExperience === '' }]" 
              @click="selectWorkExperience('')"
            >
              <text class="tag-text">不限</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.workExperience === 'less1' }]" 
              @click="selectWorkExperience('less1')"
            >
              <text class="tag-text">1年以下</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.workExperience === '1-3' }]" 
              @click="selectWorkExperience('1-3')"
            >
              <text class="tag-text">1-3年</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.workExperience === '3-5' }]" 
              @click="selectWorkExperience('3-5')"
            >
              <text class="tag-text">3-5年</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.workExperience === '5-10' }]" 
              @click="selectWorkExperience('5-10')"
            >
              <text class="tag-text">5-10年</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.workExperience === 'more10' }]" 
              @click="selectWorkExperience('more10')"
            >
              <text class="tag-text">10年以上</text>
            </view>
          </view>
        </view>

        <!-- 学历 -->
        <view class="filter-group">
          <text class="common-filter-title">学历</text>
          <view class="tag-wrapper">
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.education === '' }]" 
              @click="selectEducation('')"
            >
              <text class="tag-text">不限</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.education === '初中' }]" 
              @click="selectEducation('初中')"
            >
              <text class="tag-text">初中</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.education === '高中' }]" 
              @click="selectEducation('高中')"
            >
              <text class="tag-text">高中</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.education === '中专/技校' }]" 
              @click="selectEducation('中专/技校')"
            >
              <text class="tag-text">中专/技校</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.education === '大专' }]" 
              @click="selectEducation('大专')"
            >
              <text class="tag-text">大专</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.education === '本科' }]" 
              @click="selectEducation('本科')"
            >
              <text class="tag-text">本科</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.education === '硕士' }]" 
              @click="selectEducation('硕士')"
            >
              <text class="tag-text">硕士</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.education === 'MBA/EMBA' }]" 
              @click="selectEducation('MBA/EMBA')"
            >
              <text class="tag-text">MBA/EMBA</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.education === '博士' }]" 
              @click="selectEducation('博士')"
            >
              <text class="tag-text">博士</text>
            </view>
          </view>
        </view>

        <!-- 薪资待遇 -->
        <view class="filter-group">
          <text class="common-filter-title">薪资待遇</text>
          <view class="tag-wrapper">
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.salary === '' }]" 
              @click="selectSalary('')"
            >
              <text class="tag-text">不限</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.salary === 'less5k' }]" 
              @click="selectSalary('less5k')"
            >
              <text class="tag-text">5k以下</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.salary === '5k-10k' }]" 
              @click="selectSalary('5k-10k')"
            >
              <text class="tag-text">5-10k</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.salary === '10k-15k' }]" 
              @click="selectSalary('10k-15k')"
            >
              <text class="tag-text">10-15k</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.salary === '15k-20k' }]" 
              @click="selectSalary('15k-20k')"
            >
              <text class="tag-text">15-20k</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.salary === '20k-30k' }]" 
              @click="selectSalary('20k-30k')"
            >
              <text class="tag-text">20-30k</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.salary === '30k-50k' }]" 
              @click="selectSalary('30k-50k')"
            >
              <text class="tag-text">30-50k</text>
            </view>
            <view 
              :class="['common-tag-box', { 'common-tag-box-selected': filterData.salary === 'more50k' }]" 
              @click="selectSalary('more50k')"
            >
              <text class="tag-text">50k以上</text>
            </view>
          </view>
        </view>

        <!-- 求职状态 -->
        <view class="filter-group">
          <text class="common-filter-title">求职状态</text>
          <view class="tag-wrapper">
            <view 
              :class="['common-tag-box-status', { 'common-tag-box-status-selected': filterData.jobStatus === '' }]" 
              @click="selectJobStatus('')"
            >
              <text class="tag-text">不限</text>
            </view>
            <view 
              v-for="(status, index) in jobStatusList" 
              :key="index"
              :class="['common-tag-box-status', { 'common-tag-box-status-selected': filterData.jobStatus === status.value }]" 
              @click="selectJobStatus(status.value)"
            >
              <text class="tag-text">{{ status.value }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部按钮 -->
    <view class="bottom-actions">
      <button class="reset-btn" @click="resetFilter">重置</button>
      <button class="confirm-btn" @click="confirmFilter">确认</button>
    </view>
  </view>
</template>

<script>
import CustomHeader from "@/components/CustomHeader.vue";
import { getDictionary } from "@/api/resume.js";
import cacheManager from "@/utils/cache.js";

export default {
  components: {
    CustomHeader,
  },
  data() {
    return {
      filterData: {
        ageRange: [0, 63],
        gender: '',
        activeTime: '',
        workExperience: '',
        education: '',
        salary: '',
        jobStatus: ''
      },
      jobStatusList: [],
      // 缓存键名和过期时间（毫秒）
      CACHE_KEY: "job_seek_status",
      CACHE_EXPIRY: 24 * 60 * 60 * 1000, // 24小时
      
      // 年龄范围相关数据
      minAge: 0,
      maxAge: 63,
    };
  },
  computed: {
  },
  onLoad() {
    this.fetchJobStatus();
    // 从缓存或参数中恢复筛选条件
    this.loadFilterData();
  },
  mounted() {
    console.log('筛选页面加载完成');
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 获取缓存的字典数据
    getCachedDictionary() {
      try {
        return cacheManager.get(this.CACHE_KEY);
      } catch (e) {
        console.error("获取缓存字典数据失败:", e);
      }
      return null;
    },

    // 设置字典数据缓存
    setCachedDictionary(data) {
      try {
        cacheManager.set(this.CACHE_KEY, data, this.CACHE_EXPIRY);
      } catch (e) {
        console.error("设置缓存字典数据失败:", e);
      }
    },

    // 获取求职状态字典数据
    async fetchJobStatus() {
      try {
        // 先尝试从缓存获取
        const cachedData = this.getCachedDictionary();
        if (cachedData) {
          this.jobStatusList = cachedData;
          return;
        }

        // 缓存没有则从接口获取
        const data = await getDictionary("job_seek_status");
        if (data && Array.isArray(data)) {
          this.jobStatusList = data;
          // 缓存数据
          this.setCachedDictionary(data);
        }
      } catch (error) {
        console.log("获取求职状态字典数据失败:", error);
      }
    },

    // 加载筛选数据
    loadFilterData() {
      try {
        const cached = uni.getStorageSync('filterData');
        if (cached) {
          this.filterData = { ...this.filterData, ...JSON.parse(cached) };
        }
        console.log('当前筛选数据:', this.filterData);
        console.log('年龄范围:', this.filterData.ageRange);
      } catch (e) {
        console.error("加载筛选数据失败:", e);
      }
    },

    // llt-slider-range 年龄范围事件处理
    onAgeRangeChange(value) {
      console.log('年龄范围改变:', value);
      // llt-slider-range的@change事件直接返回数组值
      this.filterData.ageRange = value;
    },

    // 年龄格式化函数
    formatAge(value) {
      return `${value}岁`;
    },

    // 各种选择方法
    selectGender(gender) {
      this.filterData.gender = gender;
    },

    selectActiveTime(time) {
      this.filterData.activeTime = time;
    },

    selectWorkExperience(experience) {
      this.filterData.workExperience = experience;
    },

    selectEducation(education) {
      this.filterData.education = education;
    },

    selectSalary(salary) {
      this.filterData.salary = salary;
    },

    selectJobStatus(status) {
      this.filterData.jobStatus = status;
    },

    // 重置筛选
    resetFilter() {
      this.filterData = {
        ageRange: [0, 63], // 重置为完整范围
        gender: '',
        activeTime: '',
        workExperience: '',
        education: '',
        salary: '',
        jobStatus: ''
      };
      uni.removeStorageSync('filterData');
      console.log('已重置筛选条件');
    },



    // 确认筛选
    confirmFilter() {
      // 保存筛选数据到本地存储
      uni.setStorageSync('filterData', JSON.stringify(this.filterData));
      
      // 通过事件回传数据
      uni.$emit('filterConfirm', this.filterData);
      
      // 返回上一页
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #fdf7f4, #ffffff);
  display: flex;
  flex-direction: column;
}

/* 页头样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 30rpx;
  background: linear-gradient(to bottom, #fdf7f4, #f8f4f1);
}

.header-left {
  display: flex;
  align-items: center;
  width: 60rpx;
}

.back-icon {
  width: 32rpx;
  height: 32rpx;
}

.header-title {
  font-size: 34rpx;
  font-weight: 500;
  color: #333333;
}

.header-right {
  width: 60rpx;
}

.content {
  flex: 1;
  padding-bottom: 140rpx; /* 为底部按钮留空间 */
}

/* VIP专享区域 */
.vip-section {
  background: linear-gradient(to bottom, #fdf7f4, #f9f3ef);
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.vip-header {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.vip-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
}

.vip-text {
  font-size: 32rpx;
  color: #8b4513;
  font-weight: 500;
}

/* 公共筛选区域 */
.common-section {
  background-color: #ffffff;
  padding: 30rpx;
}

/* 筛选组样式 */
.filter-group {
  margin-bottom: 40rpx;
}

.filter-title {
  font-size: 32rpx;
  color: #8b4513;
  font-weight: 500;
  margin-bottom: 20rpx;
  display: block;
}

.common-filter-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 20rpx;
  display: block;
}

/* 年龄选择区域 */
.age-section {
  .age-display {
    display: flex;
    justify-content: center;
    margin-bottom: 30rpx;
    
    .age-text {
      font-size: 28rpx;
      color: #8b4513;
      background-color: #f2dacb;
      padding: 12rpx 24rpx;
      border-radius: 20rpx;
      font-weight: 500;
    }
  }
  
  .age-slider-container {
    padding: 30rpx 20rpx;
    margin: 0 10rpx;
    
    // 为llt-slider-range组件提供合适的容器样式
    :deep(.llt-slider-range) {
      width: 100%;
    }
  }
}

/* 标签包装器 - 使用Grid实现均匀对齐 */
.tag-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160rpx, 1fr));
  gap: 20rpx;
}

/* 如果需要Flex方案，取消注释下面的代码并注释掉上面的Grid */
/*
.tag-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  
  // 让每行最后的空隙固定，而不是拉伸标签
  &::after {
    content: '';
    flex: auto;
    min-width: 160rpx;
  }
}
*/

/* VIP区域标签 */
.tag-box {
  background-color: #f2dacb;
  border-radius: 30rpx;
  padding: 16rpx 32rpx;
  text-align: center;
  transition: all 0.3s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  // Grid布局下的样式
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68rpx;
  font-size: 26rpx;
}

.tag-box-selected {
  background-color: #8b4513;
  
  .tag-text {
    color: #ffffff !important;
  }
}

/* 公共区域标签 */
.common-tag-box {
  background-color: #f5f5f5;
  border-radius: 30rpx;
  padding: 16rpx 32rpx;
  text-align: center;
  transition: all 0.3s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  // Grid布局下的样式
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68rpx;
  font-size: 26rpx;
}

.common-tag-box-selected {
  background-color: #00bdb4;
  
  .tag-text {
    color: #ffffff !important;
  }
}

/* 求职状态标签（与其他标签保持一致） */
.common-tag-box-status {
  background-color: #f5f5f5;
  border-radius: 30rpx;
  padding: 16rpx 24rpx;
  text-align: center;
  transition: all 0.3s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  // Grid布局下的样式
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68rpx;
  font-size: 26rpx;
}

.common-tag-box-status-selected {
  background-color: #00bdb4;
  
  .tag-text {
    color: #ffffff !important;
  }
}

.tag-text {
  font-size: 26rpx;
  color: #666666;
  white-space: nowrap;
  font-weight: 400;
  line-height: 1.2;
}

/* 底部按钮 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  border-top: 1rpx solid #f0f0f0;
  gap: 30rpx;
}

.reset-btn {
  flex: 1;
  height: 88rpx;
  background-color: #f5f5f5;
  color: #666666;
  border: none;
  border-radius: 44rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-btn {
  flex: 2;
  height: 88rpx;
  background-color: #00bdb4;
  color: #ffffff;
  border: none;
  border-radius: 44rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
:deep(.slider-value) {
    font-size: 30rpx;
}
</style>
